<script>
import axios from "axios";
import http from "@/api/http";
export default {
  name: "ProjectList",
  methods: {
    async downLoadExcel() {
      try {
        const response = await http.get("/api/export/user/excel", {
          responseType: "blob"
        });

        const blob = new Blob([response], { type: "application/octet-stream" });
        const downloadUrl = window.URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = downloadUrl;
        link.download = "project.xlsx";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(downloadUrl);
        this.$message.success("Excel 下载成功");
      } catch (error) {
        console.error("下载 Excel 文件失败", error);
        this.$message.error("Excel 下载失败");
      }
    }
  }
}
</script>

<template>
  <div>
    <div style="display: flex;justify-content: space-between;align-items: center;">
      <div>
      <router-link tag="button" class="add-button" to="/ManagerHead/AddProject">新建项目 <i class="el-icon-plus"></i></router-link>
      </div>
      <div></div>
      <div>
      <el-button style="margin-right: 50px" @click="downLoadExcel">下载 Excel<i class="el-icon-download el-icon--right"></i></el-button>
      </div>
    </div>
    <div>
      <router-link tag="button" class="select-nav" active-class="active" to="/ManagerHead/ProjectList/ProjectDoing">在途项目</router-link>
      <router-link tag="button" class="select-nav" active-class="active" to="/ManagerHead/ProjectList/ProjectDone">结项项目</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.add-button {
  color: white;
  background: cornflowerblue;
  height: 50px;
  width: 180px;
  border-radius: 25px;
  margin: 10px;
  font-size: 20px;
  border: 0px;
}
</style>
